<template>
	<view>
		<view class="content">
			<u-search placeholder="请输入您所在的城市" v-model="keyword"></u-search>
			<br />
			<view v-for="(item,index) in cityInfo.city" :key="index"
				style="font-size: 24px;font-weight: 600;margin-bottom: 10px;color: #3183FB;">

				{{item.title}}
				<br />
				<hr style="opacity: .3;" />
				<view v-for="(city,index) in cityInfo.city[index].lists" :key="index"
					style="font-size: 18px;font-weight: 500;padding: 6px 20px ;color: #000000aa;">
					<span @click="selectCity(city)">{{city}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityList from "../location/citylist.json"
	export default {
		data() {
			return {
				cityInfo: cityList,
				keyword: '',
			}
		},
		methods: {
			selectCity(city) {
				// console.log(city)
				uni.redirectTo({
					url: '/pages/register/register?city=' + city,
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: white;
		width: 100%;
		padding: 18px 18px;
		box-sizing: border-box;
	}
</style>